<template>
	<view>
		<!-- 活动 -->
		<view class="row">
			<view @click="details()">
				<!-- 图片 -->
				<view class="diagram">
					<image class="active_diagram" :src="img"></image>
				</view>
				<view class="header">
					<text class="text">{{title}}</text><text>></text>
				</view>
			</view>
			<!-- 客户报名列表 -->
			<view class="sign_up" @click="apply()">
				<view class="title">
					<view class="head">客户报名列表</view>
				</view>
				<view class="people">
					<view class="people_num">
						<view class="people_title">报名人数</view>
						<view class="num">{{signup}}</view>
					</view>
					<view class="people_pay">
						<view class="people_title">支付人数</view>
						<view class="num">{{pay}}</view>
					</view>
				</view>
			</view>
			<!-- 顾问关注列表 -->
			<view class="attention" @click="attention()">
				<view class="title">
					<view class="head">客户关注列表</view>
				</view>
				<view class="people">
					<view class="people_num">
						<view class="people_title">分享人数</view>
						<view class="num">{{share}}</view>
					</view>
					<view class="people_pay">
						<view class="people_title">阅读人数</view>
						<view class="num">{{read}}</view>
					</view>
				</view>
			</view>
			<!-- 顾问数据列表 -->
			<view class="digital">
				<view class="title">
					<view class="head">顾问数据列表</view>
				</view>
				<view class="sell_coupon" v-if="order" @click="volume()">
					<view class="order">
						<view class="one">
							<image class="on_bg" src="../../static/sellcoupon_and_propagation/one.png"></image>
							<view class="order_title">{{one_name}}</view>
						</view>
						<view class="num">{{one_share}}</view>
						<view class="order_num">报名人数</view>
					</view>
					<view class="two">
						<view class="one">
							<image class="two_bg" src="../../static/sellcoupon_and_propagation/two.png"></image>
							<view class="order_title">{{two_name}}</view>
						</view>
						<view class="num">{{two_share}}</view>
						<view class="order_num">报名人数</view>
					</view>
					<view class="order">
						<view class="one">
							<image class="three_bg" src="../../static/sellcoupon_and_propagation/three.png"></image>
							<view class="order_title">{{three_name}}</view>
						</view>
						<view class="num">{{three_share}}</view>
						<view class="order_num">报名人数</view>
					</view>
				</view>
				<view class="sell_coupon" v-if="!order" @click="propagation()">
					<view class="order">
						<view class="one">
							<image class="on_bg" src="../../static/sellcoupon_and_propagation/one.png"></image>
							<view class="order_title">{{name_one}}</view>
						</view>
						<view class="num">{{share_one}}</view>
						<view class="order_num">传播人数</view>
					</view>
					<view class="two">
						<view class="one">
							<image class="two_bg" src="../../static/sellcoupon_and_propagation/two.png"></image>
							<view class="order_title">{{name_two}}</view>
						</view>
						<view class="num">{{share_two}}</view>
						<view class="order_num">传播人数</view>
					</view>
					<view class="order">
						<view class="one">
							<image class="three_bg" src="../../static/sellcoupon_and_propagation/three.png"></image>
							<view class="order_title">{{name_three}}</view>
						</view>
						<view class="num">{{share_three}}</view>
						<view class="order_num">传播人数</view>
					</view>
				</view>
				<!-- 选项卡 -->
				<view class="option">
					<view class="voucher" v-bind:class="{toogle:isActive}" @click="voucher()">
						<view class="list">卖券榜</view>
					</view>
					<view class="spread" v-bind:class="{toogle:!isActive}" @click="spread()">
						<view class="list">传播榜</view>
					</view>
				</view>
			</view>
			<!-- 掌邦技术支持 -->
			<view class="support">
				<image class="zanboon" src="../../static/sellcoupon_and_propagation/zanboon.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				img:'http://img.redocn.com/sheying/20140731/qinghaihuyuanjing_2820969.jpg',
				title:'我是活动名字来来来分是奥恩啊瓦fewl的让百度',
				signup:98,
				pay:99,
				share:34,
				read:57,
				order:true,
				one_name:'刘美丽',
				one_share:98,
				two_name:'黄美丽',
				two_share:97,
				three_name:'李美丽',
				three_share:96,
				
				name_one:'花美丽',
				share_one:95,
				name_two:'区美丽',
				share_two:94,
				name_three:'白美丽',
				share_three:93,
				isActive:true,
			}
		},
		methods:{
			apply:function(){
				uni.navigateTo({
					url: '/pages/apply/apply'
				});
			},
			details:function(){
				uni.navigateTo({
					url: '/pages/huodongxiangqing/huodongxiangqing'
				});
			},
			attention:function(){
				uni.navigateTo({
					url: '/pages/attention/attention'
				});
			},
			volume:function(){
				uni.navigateTo({
					url: '/pages/datasheets/datasheets?id=0'
				});
			},
			propagation:function(){
				uni.navigateTo({
					url: '/pages/datasheets/datasheets?id=1'
				});
			},
			voucher:function(){
				let that=this;
				that.isActive=true;
				that.order=true;
				// console.log(123);
			},
			spread:function(){
				let that=this;
				that.isActive=false;
				that.order=false;
				// console.log(369);
			},
			
		}
		
	}
</script>

<style>
	page{
		background: #F3F2F7;
	}
	.row{
		
	}
	.diagram{
		width: 100%;
		height: 406upx;
	}
		.active_diagram{
			width: 750upx;
			height: 100%;
		}
	.header{
		padding: 24upx 30upx;
		background-color: #FFFFFF;
		color: #CCCCCC;
		font-size: 34upx;
		font-weight:bold;
		margin-bottom: 20upx;
	}
		.text{
			color: #333333;
			font-size: 30upx;
			font-weight:600;
			margin-right:20upx ;
		}
	.sign_up{
		height: 228upx;
		/* width: 750upx; */
		background:url(../../static/sellcoupon_and_propagation/apply_bg.png);
		background-repeat:no-repeat;
		background-size: 100% 100%;
		margin-bottom: 20upx;
		/* border: 1upx solid #007AFF; */
	}
		.title{
			display: flex;
			justify-content: center;
			height: 100upx;
			font-size: 32upx;
			font-weight: bold;
			/* border: 1upx solid #333333; */
		}
			.head{
				margin-top:20upx;
			}
		.people{
			display: flex;
			justify-content:center;
			
			/* align-items: center; */
		}
			.people_num{
				margin-right: 130upx;
			}
			.people_pay{
				margin-left: 130upx;
			}
			.people_num,.people_pay{
				display: flex;
				flex-direction: column;
				align-items: center;
				/* border: 1upx solid #333333; */
			}
				.people_title{
					color: #666666;
					font-size: 28upx;
				}
				.num{
					color: #333333;
					font-size: 48upx;
					font-weight: 600;
				}
	.attention{
		height: 228upx;
		background:url(../../static/sellcoupon_and_propagation/attention_bg.png);
		background-repeat:no-repeat;
		background-size: 100% 100%;
		margin-bottom: 20upx;
	}
	.digital{
		height: 314upx;
		background:url(../../static/sellcoupon_and_propagation/data_bg.png);
		background-repeat:no-repeat;
		background-size: 100% 100%;
		margin-bottom: 20upx;
	}
		.sell_coupon{
			display: flex;
			 justify-content: space-around;
		}
			.order,.two{
				display: flex;
				/* justify-content: center; */
				flex-direction: column;
				align-items: center;
			}
				.one{
					display: flex;
					align-items: center;
				}
				.order_title{
					font-size: 28upx;
					color: #333333;
				}
			.order_num{
				font-size: 24upx;
				color: #666666;
			}
					.on_bg,.two_bg,.three_bg{
						height: 28upx;
						width: 28upx;
						margin-right: 4upx;
					}
		.option{
			margin-top: 22upx;
			display: flex;
			justify-content: center;
			color: #AAAAAA;
			font-size: 22upx;
		}
		.toogle{
			color:#D60C09 ;
			border-bottom:1upx solid #D60C09  ;
		}
			.voucher{
				margin-right:19upx;
			}
			.spread{
				margin-left:19upx;
			}
	.support{
			position: relative;
			display: flex;
			justify-content: center;
			margin-top:34upx;
			margin-bottom: 20upx;
		}
			.zanboon{
				height: 28upx;
				width: 216upx;
			}
</style>
